<template>
  <el-dialog :visible.sync="warningVisible" @close="destroyElement"
             :width="width"
             :show-close="showClose"
             :close-on-click-modal="showClose"
             :close-on-press-escape="showClose"
             class="member-detail"
  >
    <div class="member-detail__status-title" slot="title">
      会员账户：
      <svg-icon icon-class="user" :type="fetchData.isOnline === 1 ? 'primary' : 'info'"></svg-icon>
      {{info.username}}
      <div :class="fetchData.isActive ? 'online-primary' : 'online-danger'">{{fetchData.isActive === 1 ? '活跃' : '待活跃'}}</div>
    </div>
    <div class="member-detail__status-info">
      <div class="member-detail__status-betting">公司输赢：<money-text style="display: inline-block" :negate="true" :value="_result(fetchData, 'amount.betWinAmount.value')"></money-text></div>
      <div class="member-detail__status-time">数据汇总时间：{{startTime | toDate}} - {{endTime | toDate}}</div>
    </div>
    <table
        class="member-detail__table el-table el-table--fit el-table--border el-table--border-radius el-table--enable-row-hover" v-if="fetchData">
      <tr>
        <td>充值金额</td>
        <td>{{_result(fetchData, 'amount.rechargeAmount.value') | currency}}</td>
        <td>上分总额</td>
        <td>{{_result(fetchData, 'upAmountSum') | currency}}</td>
      </tr>
      <tr>
        <td>提现金额</td>
        <td>{{_result(fetchData, 'amount.withdrawAmount.value') | currency}}</td>
        <td>首存详情</td>
        <td v-if="fetchData.firstRechargeType != ''">{{_result(fetchData, 'amount.firstRechargeAmount.value') | currency}}/{{fetchData.firstRechargeType}}/{{fetchData.firstRechargeTime | toTime}}</td>
        <td v-else>暂无</td>
      </tr>
      <tr>
        <td>有效投注总额</td>
        <td>{{_result(fetchData, 'amount.betEffectAmount.value') | currency}}</td>
        <!--<td>在线状态</td>-->
        <!--<td :class="fetchData.isOnline ? 'text-bold-primary' : 'text-bold-danger'">-->
          <!--{{fetchData.isOnline === 1 ? '在线' : '离线'}}-->
        <!--</td>-->
        <td>注册网址</td>
        <td>
          <!--<div class="member-detail__domain" :title="fetchData.regInfo.domain">-->
            <!--{{fetchData.regInfo.domain}}-->
          <!--</div>-->
          <a class="member-detail__domain" :title="fetchData.regInfo.domain">{{fetchData.regInfo.domain}}</a>
        </td>
      </tr>
      <tr>
        <td>投注总额</td>
        <td>{{_result(fetchData, 'amount.bettingAmount.value') | currency}}</td>
        <td>注册端</td>
        <td>{{fetchData.regInfo.platform | toConverter('CLIENT_TYPE')}}</td>
      </tr>
      <tr>
        <td>红利总额</td>
        <td>{{_result(fetchData, 'amount.bonusAmount.value') | currency}}</td>
        <td>注册时间</td>
        <td>{{fetchData.regInfo['@timestamp'] | toTime}}</td>
      </tr>
      <tr>
        <td>返水总额</td>
        <td>{{_result(fetchData, 'amount.rebeatAmount.value') | currency}}</td>
        <td>最后登录时间</td>
        <td>{{fetchData.loginInfo && fetchData.loginInfo.time === 0 ? '' : _result(fetchData, 'loginInfo.time') | toTime}}</td>
      </tr>
      <tr>
        <td>有效投注投注单</td>
        <td>{{fetchData.betCount}}</td>
        <!--<td>最后登录时间</td>-->
        <!--<td>{{_result(fetchData, 'loginInfo.time') | toTime}}</td>-->
        <td><span v-show="showType">当月有效会员状态</span></td>
        <!--<td :class="fetchData.isEffect ? 'text-bold-primary' : 'text-bold-danger'">-->
          <!--{{fetchData.isEffect === 1 ? '有效会员' : '非有效会员'}}-->
        <!--</td>-->
        <td :class="fetchData.isEffect ? 'text-bold-primary' : 'text-bold-danger'" style="cursor: pointer">
          <div v-if="effectShow" @click="changeEffectShow(0)" v-show="showType">
            <div v-if="fetchData.isEffect === 1">有效会员</div>
            <div v-else>非有效会员</div>
          </div>
          <div v-else class="member-detail__table-item" @click="changeEffectShow(1)">
            有效投注单：<span>{{fetchData.betCount}}/5</span><br/>
            有效投注额：<span>{{_result(fetchData, 'amount.betEffectAmount.value') | currency}}/1000</span>
          </div>
        </td>
      </tr>
    </table>

    <div class="member-detail__footer" v-if="isCreditUp">
      <el-button class="member-detail__button" @click="openCreditUp" type="primary">上分</el-button>
    </div>
    <el-warning style="margin-top: 10px" align="top">
      活跃会员：充值/提现/投注/参与活动，达到其中一个条件即为活跃会员<br/>
      当月有效会员：月有效投注额大于1000元，月有效投注单数大于5单<br/>
    </el-warning>
  </el-dialog>
</template>

<script type="text/jsx">

  import {memberDetailApi as getApi} from '@/services/api/low-level';

  import getCommand from '@/mixins/get-command';

  export default {
    name: 'member-detail',

    mixins: [getCommand],

    data() {
      return {
        warningVisible: true,
        info: {},
        width: consts.DIALOG_SIZE_LARGE,
        showClose: true,
        closed: false,
        fetchData: {
          amount: {},
          regInfo: {}
        },
        callback: _.noop,
        effectShow: true,
        monthTimetamp: _.toTimestamp({start: [0, 'month'], end: [0, 'month'], startEnd: true})
      };
    },

    watch: {
      closed(newVal) {
        if (newVal) {
          this.warningVisible = false;
        }
      }
    },

    methods: {
      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },
      openCreditUp() {
        this.$creditUp({
          info: this.info,
          callback: action => {
            if (action === 'success') {
              this.callback('success');
            }
          }
        });
        this.close();
      },
      destroyElement() {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },
      changeEffectShow(effectStatus) {
        if (effectStatus === 0){
          this.effectShow = false;
        }else {
          this.effectShow = true;
        }
      },
    },

    computed: {
      ...mapGetters([
        'isCreditUp'
      ]),
      ...mapState({
        creditStatus: state => state.creditStatus
      }),
      startTime(){
        return this.info.filters && this.info.filters.date ? this.info.filters.date[0] : new Date(new Date().setHours(0,0,0,0)).getTime();
      },
      endTime(){
        return this.info.filters && this.info.filters.date ? this.info.filters.date[1] :  new Date(new Date().setHours(23,59,59,59)).getTime();
      },
      showType(){
        return this.startTime < this.monthTimetamp[0] ? false : true;
      }
    },

    mounted() {
      this.bindGet(getApi, 'fetchData', {
        sendingData: {
          userId: this.info.id,
          stime:this.startTime,
          etime:this.endTime
        }
      });
      this.getAll();
    },

  };
</script>

<style lang="scss" scoped>
  @include b(member-detail) {
    @include e(username-column) {
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon {
        margin-right: 6px;
      }
    }
    @include e(status-title) {
      height: 60px;
      font-size: 28px;
      font-weight: bold;
      line-height: 60px;
      .svg-icon {
        width: 17px;
        height: 21px;
        margin-right: 10px;
      }
      .online-primary {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
        background: $--color-primary;
        display: inline-block;
        border-radius: 5px;
        margin-left: 10px;
      }
      .online-danger {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        font-size: 12px;
        background: #999999;
        display: inline-block;
        border-radius: 5px;
        margin-left: 10px;
      }
    }
    @include e(status-info) {
      font-size: 14px;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
      @include e(status-betting) {
        float: left;
      }
      @include e(status-time) {
        float: right;
      }
    }

    @include e(table) {
      margin-bottom: 60px;
      td {
        width: 25%;
        text-align: center;

        &:nth-of-type(2n + 1) {
          background-color: #fbfbfb;
        }
      }

      &:before, &:after {
        display: none;
      }
      @include e(table-item) {
        color: #000000;
        text-align: left;
        font-weight: 400;
        padding-left: 10px;
        span {
          color: #d20d25;
        }
      }
    }

    @include e(domain) {
      @include utils-ellipsis();
      display: inline-block;
      width: 200px;
      color: #000000;
    }

    @include e(footer) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @include e(button) {
      width: 276px;
    }
  }
</style>
